<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <div id="add-main" style="display: none;">
      <div class="my-form">
        <form class="layui-form" action="/user/add" method="POST" lay-skin="line">
          <div class="layui-form-item my-form-item">
            <label class="layui-form-label layui-icon">&#xe770;</label>
            <div class="layui-input-inline">
              <input type="text" name="name" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-form-item my-form-item">
            <label class="layui-form-label layui-icon">&#xe673;</label>
            <div class="layui-input-inline">
              <input type="text" name="password" lay-verify="required" placeholder="请输入邮箱" autocomplete="off"
                     class="layui-input">
            </div>
          </div>

          <div class="layui-form-item my-form-item">
            <div class="layui-input-block item">
              <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit1">保存</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
      </div>
    </script>


    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>



    <script>
        layui.use(['table','layer'], function(){
            var table = layui.table,
                layer = layui.layer;
            var $ = layui.$;

            let aurl='http://localhost:8080/shopping/user'

            table.render({
                elem: '#test'
                ,url:aurl+'?type=list'  //换
                ,parseData: function(res){ //res 即为原始返回的数据

                    return {
                        "code": res.status, //解析接口状态
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }

                ,response: {
                    dataName: 'data' //规定数据状态的字段名称，默认：code
                    //,statusCode: 0 //规定成功的状态码，默认：0
                    //,countName: 'total' //规定数据总数的字段名称，默认：count

                }

               ,request: {
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    ,pageName: 'pageNum' //页码的参数名称，默认：page
                }

                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,title: '用户数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'id', title:'编号',  unresize: true, sort: true,align:'center'}
                    ,{field:'username', title:'用户名', edit: 'text',align:'center'}
                    ,{field:'email', title:'邮箱', edit: 'text',align:'center', templet: function(res){
                            return '<em>'+ res.email +'</em>'
                        }}
                    ,{field:'phone', title:'电话号码',  edit: 'text', align:'center'}
                    ,{field:'question', title:'验证问题' , edit: 'text',align:'center'}
                    ,{field:'answer', title:'答案' , edit: 'text',align:'center'}
                    ,{field:'role', title:'角色', edit:'text', align:'center',templet:function (r) {
                            return r.role === 1 ?'用户':'管理员';
                        }}
                ]]
                ,page: true
                ,done:function(res){
                    console.log(res)
                }
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                }
            });

            //监听单元格编辑
            table.on('edit(test)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段

                $.ajax({
                    url: '/user/update',      //换成自己的url
                    type: 'POST',
                    xhrFields: { withCredentials: true },
                    dataType: 'json',
                    data: data,
                    success: function (e) {
                        if (e.status === 0) {
                            layer.msg(e.msg);
                        } else {
                            layer.msg(e.msg);
                        }
                    },
                    error: function (e) {
                        layer.msg(e);
                    }
                })
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            url: "/user/del",    //换成自己的url
                            type: "POST",
                            xhrFields: { withCredentials: true },
                            dataType: "json",
                            data: {
                                id: data.id
                            },
                            success: function (e) {
                                if (e.status === 0) {
                                    layer.msg(e.msg);
                                } else {
                                    layer.msg(e.msg);
                                }
                            },
                            error: function (e) {
                                layer.msg(e);
                            }
                        })
                    });
                } else if (obj.event == 'add') {
                    $.ajax({
                        url: "/user/add",      //这里换成自己的url即可
                        type: "POST",
                        xhrFields: { withCredentials: true },
                        dataType: "json",
                        data: data,
                        success: function (e) {
                            if (e.status === 0) {
                                layer.msg(e.msg);
                            } else {
                                layer.msg(e.msg);
                            }
                        },
                        error: function (e) {
                            layer.msg(e);
                        }
                    })
                }
            });
        });
    </script>
  </body>
</html>